<template>
  <div>
    <el-tooltip effect="light" :content="`${nodeData.zoneNameEn}(${nodeData.zoneName})`" placement="top" :disabled="disabledToolTip">
      <div class="node-page" :style="{ width: `${nodeData.tempSize.width}px`, height: `${nodeData.tempSize.height}px` }">
        <div class="node-label" v-show="isShowLabel">{{ `${nodeData.zoneNameEn}` }}</div>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts" name="nodeArea">
import { ref, onMounted, inject } from "vue";
import { Node } from "@antv/x6";
import { computedSize } from "@/utils/antvx6/drawArea";
const getNode: Function | undefined = inject<Function>("getNode");
const node = getNode?.() as Node;
const isShowLabel = ref<boolean>(true)
const disabledToolTip = ref<boolean>(false)
const nodeData = ref({
  zoneNameEn: "",
  zoneName: "",
  points: [],
  tempSize: {
    width: 0,
    height: 0,
  },
});

onMounted(() => {
  nodeData.value = node.getData()
  nodeData.value.tempSize = computedSize(nodeData.value.points)

  node.on("change:data", ({ current }) => {
    nodeData.value = current;
  });
  // 显示隐藏节点
  node.on("change:isShowNode", ({ current }) => {
    current ? node.show() : node.hide()
  });
  // 显示隐藏label弹窗提示组件
  node.on("change:isShowToolTip", ({ current }) => {
    disabledToolTip.value = !current
  });
  // 显示隐藏节点Label
  node.on("change:isShowLabel", ({ current }) => {
      isShowLabel.value = current
    });
});

</script>
<style scoped lang="scss">
.node-page {
  position: relative;
  border: 1px dashed #5b8ff9;
  background: rgba($color: #7948ea, $alpha: 0.5);

  .node-label {
    top: -15px;
    left: 0;
    color: #fff;
    width: 100%;
    font-size: 10px;
    text-wrap: nowrap;
    text-align: center;
    position: absolute;
  }
}
</style>
